
<template>
  <div class="homepage-container">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="nav-content">
        <span class="nav-text">你好，请登录</span>
        <span class="nav-link">免费注册</span>
        <span class="nav-divider">|</span>
        <span class="nav-text">关注我们：</span>
        <div class="social-icons">
          <i class="el-icon-message"></i>
          <i class="el-icon-phone"></i>
        </div>
        <span class="nav-divider">|</span>
        <span class="nav-link">手机版</span>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 网站标题 -->
      <div class="site-title">
        <h1>多·快·好·省</h1>
      </div>

      <div class="content-wrapper">
        <!-- 左侧产品展示区域 -->
        <div class="product-showcase">
          <div class="showcase-content">
            <!-- 手机展示 -->
            <div class="phone-mockup">
              <div class="phone-screen">
                <div class="app-header">多·快·好·省</div>
                <div class="product-grid">
                  <div class="product-item" v-for="item in showcaseProducts" :key="item.id">
                    <div class="product-image" :style="{ backgroundColor: item.color }">
                      <span class="product-icon">{{ item.icon }}</span>
                    </div>
                    <div class="product-name">{{ item.name }}</div>
                  </div>
                </div>
                <div class="app-bottom">
                  <div class="category-item" v-for="category in categories" :key="category">
                    {{ category }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 实物产品展示 -->
            <div class="physical-products">
              <div class="product-card denim-jacket">
                <div class="product-label">时尚服装</div>
              </div>
              <div class="product-card macarons">
                <div class="product-label">精美甜品</div>
              </div>
              <div class="product-card cosmetics">
                <div class="product-label">美妆护肤</div>
              </div>
            </div>

            <!-- 二维码区域 -->
            <div class="qr-code-section">
              <div class="qr-bag">
                <div class="qr-code">
                  <div class="qr-pattern"></div>
                </div>
              </div>
              <div class="qr-text">
                <h3>扫码购物</h3>
                <p>精彩无限！</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧注册表单 -->
        <div class="register-section">
          <div class="register-card">
            <div class="register-header">
              <h2>注册</h2>
              <div class="login-link">
                <span>已有账号？</span>
                <el-link type="primary" :underline="false" @click="goToLogin">我要登录</el-link>
              </div>
            </div>

            <el-form
                :model="registerForm"
                :rules="registerRules"
                ref="registerFormRef"
                class="register-form"
            >
              <el-form-item prop="username">
                <el-input
                    v-model="registerForm.username"
                    placeholder="用户名"
                    size="large"
                    :prefix-icon="User"
                />
              </el-form-item>

              <el-form-item prop="password">
                <el-input
                    v-model="registerForm.password"
                    type="password"
                    placeholder="密码"
                    size="large"
                    :prefix-icon="Lock"
                    show-password
                />
              </el-form-item>

              <el-form-item prop="confirmPassword">
                <el-input
                    v-model="registerForm.confirmPassword"
                    type="password"
                    placeholder="确认密码"
                    size="large"
                    :prefix-icon="Lock"
                    show-password
                />
              </el-form-item>

              <el-form-item prop="email">
                <el-input
                    v-model="registerForm.email"
                    type="email"
                    placeholder="邮箱"
                    size="large"
                    :prefix-icon="Message"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                    type="primary"
                    size="large"
                    class="register-btn"
                    @click="handleRegister"
                    :loading="registerLoading"
                >
                  立即注册
                </el-button>
              </el-form-item>

              <!-- 服务条款 -->
              <div class="terms-text">
                <el-checkbox v-model="agreeTerms" size="small">
                  我已阅读并同意
                </el-checkbox>
                <el-link type="primary" :underline="false">《用户服务协议》</el-link>
                和
                <el-link type="primary" :underline="false">《隐私政策》</el-link>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { User, Lock, Message } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 注册表单数据
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: ''
})

// 表单引用
const registerFormRef = ref()

// 注册加载状态
const registerLoading = ref(false)

// 同意服务条款
const agreeTerms = ref(false)

// 表单验证规则
const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]/,
      message: '密码至少包含一个大写字母、一个小写字母和一个数字',
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== registerForm.password) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

// 展示产品数据
const showcaseProducts = ref([
  { id: 1, name: '服装', icon: '👕', color: '#ff6b6b' },
  { id: 2, name: '数码', icon: '📱', color: '#4ecdc4' },
  { id: 3, name: '家居', icon: '🏠', color: '#45b7d1' },
  { id: 4, name: '美妆', icon: '💄', color: '#f9ca24' },
  { id: 5, name: '食品', icon: '🍰', color: '#f0932b' },
  { id: 6, name: '运动', icon: '⚽', color: '#eb4d4b' }
])

// 分类数据
const categories = ref(['热门推荐', '品质好货', '限时特惠', '新品上市'])

// 注册处理
const handleRegister = async () => {
  if (!agreeTerms.value) {
    ElMessage.warning('请先同意用户服务协议和隐私政策')
    return
  }

  try {
    await registerFormRef.value.validate()

    registerLoading.value = true

    // 模拟注册请求
    setTimeout(() => {
      console.log('注册信息:', registerForm)
      ElMessage.success('注册成功！')
      registerLoading.value = false
      // 这里后续会接入注册接口
    }, 2000)

  } catch (error) {
    console.log('表单验证失败:', error)
  }
}

// 跳转到登录页面
const goToLogin = () => {
  console.log('跳转到登录页面')
  // 这里实现页面跳转逻辑
}
</script>

<style scoped>
.homepage-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 顶部导航栏 */
.top-nav {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 0;
  backdrop-filter: blur(10px);
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  color: white;
  font-size: 12px;
}

.nav-text, .nav-link {
  margin: 0 8px;
}

.nav-link {
  cursor: pointer;
  text-decoration: underline;
}

.nav-divider {
  margin: 0 8px;
  opacity: 0.6;
}

.social-icons {
  display: flex;
  gap: 8px;
  margin: 0 8px;
}

.social-icons i {
  cursor: pointer;
  opacity: 0.8;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.site-title {
  text-align: center;
  margin-bottom: 60px;
}

.site-title h1 {
  color: white;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 4px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.content-wrapper {
  display: flex;
  gap: 80px;
  align-items: center;
}

/* 左侧产品展示区域 */
.product-showcase {
  flex: 1;
}

.showcase-content {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* 手机展示 */
.phone-mockup {
  background: #333;
  border-radius: 25px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: rotate(-5deg);
}

.phone-screen {
  width: 250px;
  height: 450px;
  background: white;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.app-header {
  text-align: center;
  font-weight: bold;
  color: #ff6b4a;
  margin-bottom: 20px;
  font-size: 18px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  flex: 1;
}

.product-item {
  text-align: center;
}

.product-image {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 8px;
}

.product-name {
  font-size: 12px;
  color: #666;
}

.app-bottom {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.category-item {
  font-size: 10px;
  color: #999;
  padding: 4px 8px;
  background: #f5f5f5;
  border-radius: 10px;
}

/* 实物产品展示 */
.physical-products {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-card {
  width: 120px;
  height: 80px;
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.denim-jacket {
  background: linear-gradient(45deg, #2c3e50, #3498db);
}

.macarons {
  background: linear-gradient(45deg, #ff9a9e, #fecfef);
}

.cosmetics {
  background: linear-gradient(45deg, #a8edea, #fed6e3);
}

.product-label {
  position: relative;
  z-index: 2;
}

/* 二维码区域 */
.qr-code-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.qr-bag {
  width: 100px;
  height: 80px;
  background: #ff4757;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qr-bag::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #ff4757;
}

.qr-code {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-pattern {
  width: 45px;
  height: 45px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="20" height="20" fill="black"/><rect x="40" width="20" height="20" fill="black"/><rect x="80" width="20" height="20" fill="black"/><rect y="40" width="20" height="20" fill="black"/><rect x="80" y="40" width="20" height="20" fill="black"/><rect y="80" width="20" height="20" fill="black"/><rect x="40" y="80" width="20" height="20" fill="black"/><rect x="80" y="80" width="20" height="20" fill="black"/></svg>') no-repeat center;
  background-size: contain;
}

.qr-text {
  text-align: center;
  color: white;
}

.qr-text h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: bold;
}

.qr-text p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

/* 右侧注册区域 */
.register-section {
  width: 380px;
  flex-shrink: 0;
}

.register-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.register-header {
  margin-bottom: 30px;
}

.register-header h2 {
  font-size: 28px;
  color: #333;
  margin: 0 0 10px 0;
  font-weight: 500;
}

.login-link {
  font-size: 14px;
  color: #666;
}

.register-form .el-form-item {
  margin-bottom: 20px;
}

.register-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(45deg, #ff6b4a, #ff8a50);
  border: none;
}

.register-btn:hover {
  background: linear-gradient(45deg, #ff5a39, #ff7940);
}

.terms-text {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-top: 20px;
  line-height: 1.5;
}

.terms-text .el-checkbox {
  margin-right: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .showcase-content {
    justify-content: center;
  }

  .register-section {
    width: 100%;
    max-width: 400px;
  }

  .site-title h1 {
    font-size: 36px;
  }

  .register-card {
    padding: 30px 20px;
  }
}
</style>
